<template>
	<view class="bg-container">
		<view class="container container-1">
			<view class="dot tl"></view>
			<view class="dot tr"></view>
			<view class="dot bl"></view>
			<view class="dot br"></view>
			
			
			<view class="top-pic iconfont icon-zijinmingxi"></view>
			
			<view class="title-container">
				<view class="title">升级成为VIP</view>
				<view class="sub-title">仅需198元</view>
				<view style="text-align:center;width:100%" @click="beVIP">
					<view class="title-button">立即付款</view>
				</view>
			</view>
		</view>
		<view class="container container-2">
			<view class="dot tl"></view>
			<view class="dot tr"></view>
			<view class="dot bl"></view>
			<view class="dot br"></view>
			
			<view>
				<img src="@/static/bevip.png"/>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
			config:this.$config
			}
		},
		methods:{
			beVIP:function(){
				if(!confirm("确实要升级成为VIP吗？"))return;
				
				var u_json = localStorage.getItem("userInfo");
				var userInfo = JSON.parse(u_json);
				
				uni.request({
					url: this.$config.Distribute_URL+"changestate_bb/?dbname=Retail_Store"+this.userInfo.StoreUserInfo.StoreId+"&userid="+userInfo.StoreUserInfo.Uid+"&amount=198",
					method:"GET",
					success:(pyResult)=>{
						alert(pyResult.data);
						this.$Router.push('/pages/app/dealer/center',{});
					},
				})
			}
		}
	}
</script>

<style scope="scoped" lang="scss">
	.bg-container{
		width:100%;
		height:100%;
		background-color:rgb(240,199,135);
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:flex-start;
		
	}
	
	.container{
		margin-top:80rpx;
		width:90%;
		display:inline-block;
		background-color:white;
		position:relative;
		// overflow:hidden;
		z-index:100;
		
		&.container-1{
			height:400rpx;
		}
		&.container-2{
			margin-top:0px;
			padding-top:60rpx;
			padding-bottom:50rpx;
			text-align:center;
			border-top:dashed 3px rgb(240,199,135);
		}
		
		$dotSize:60rpx;
		.dot{
			position:absolute;
			border-radius:50%;
			width:$dotSize;
			height:$dotSize;
			z-index:101;
			background-color: rgb(240,199,135);
			
			&.tl{
				top:$dotSize*-0.5;
				left:$dotSize*-0.5;
			}
			&.tr{
				top:$dotSize*-0.5;
				right:$dotSize*-0.5;
			}
			&.bl{
				bottom:$dotSize*-0.5;
				left:$dotSize*-0.5;
			}
			&.br{
				bottom:$dotSize*-0.5;
				right:$dotSize*-0.5;
			}
		}
		
		
		$toppic:130rpx;
		.top-pic{
			position:absolute;
			top:0px;
			left:50%;
			width:$toppic;
			height:$toppic;
			
			background-color:rgb(240,199,135);
			border-radius:50%;
			border:solid 20rpx white;
			
			text-align:center;
			line-height:$toppic*2/3;
			font-size:50rpx;
			color:white;
			
			margin-top:-$toppic/2;
			margin-left:-$toppic/2;
		}
		
		.title-container{
			margin-top:100rpx;
			
			.title{
				font-size:40rpx;
				width:100%;
				font-weight:bold;
				text-align:center;
			}
			.sub-title{
				font-size:20rpx;
				width:100%;
				margin-top:30rpx;
				text-align:center;
			}
			.title-button{
				width:260rpx;
				height:60rpx;
				line-height:60rpx;
				text-align:center;
				margin-top:30rpx;
				display:inline-block;
				background-color:rgb(240,199,135);
				border-radius:30rpx;
				color:white;
			}
		}
	}
	
</style>
